<template>
    <div class="params">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">{{
                $t('goods.home')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
                $t('goods.goodsManage')
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('goods.cateParam') }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 警告区域 -->
            <el-alert
                show-icon
                :title="$t('goods.tips')"
                type="warning"
                :closable="false"
            >
            </el-alert>

            <!-- 选择商品分类区域 -->
            <el-row class="goodsClassify">
                <el-col>
                    <el-form>
                        <el-form-item :label="$t('goods.selectGoodsCate')">
                            <!-- options 用来指定数据源 -->
                            <!-- props 用来指定配置对象 -->
                            <el-cascader
                                v-model="selectKeys"
                                :options="CateList"
                                :props="cascaderProps"
                                @change="handleChange"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <!-- tab 页签区域 -->
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <!-- 添加动态参数面板 -->
                <el-tab-pane :label="$t('goods.dynamicParam')" name="many">
                    <!-- 添加动态参数按钮 -->
                    <el-button
                        type="primary"
                        size="mini"
                        v-bind:disabled="isBtnDisabled"
                        v-on:click="adddialogVisible = true"
                    >
                        {{ $t('goods.addParam') }}
                    </el-button>
                    <!-- 动态参数表格 -->
                    <el-table
                        v-bind:data="manyTableDate"
                        border
                        width="100%"
                        stripe
                    >
                        <!-- 展开行 -->
                        <el-table-column
                            type="expand"
                            :label="$t('goods.detail')"
                            width="70"
                        >
                            <template slot-scope="scope">
                                <!-- 渲染参数详情信息 -->
                                <el-tag
                                    v-for="(item, index) in scope.row.attr_vals"
                                    v-bind:key="index"
                                    closable
                                    v-on:close="handleClose(index, scope.row)"
                                >
                                    {{ item }}
                                </el-tag>
                                <!-- 要添加参数详情数据的文本框 -->
                                <el-input
                                    class="input-new-tag"
                                    v-if="scope.row.inputVisible"
                                    v-model="scope.row.inputValue"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="
                                        handleInputConfirm(scope.row)
                                    "
                                    @blur="handleInputConfirm(scope.row)"
                                >
                                </el-input>
                                <!-- 添加参数详情数据的按钮 -->
                                <el-button
                                    v-else
                                    class="button-new-tag"
                                    size="small"
                                    @click="showInput(scope.row)"
                                    >+ New Tag</el-button
                                >
                            </template>
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column
                            type="index"
                            :label="$t('goods.id')"
                            width="60"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            :label="$t('goods.paramName')"
                            prop="attr_name"
                        ></el-table-column>
                        <el-table-column :label="$t('goods.operate')">
                            <!-- 操作 -->
                            <template slot-scope="scope">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="$t('goods.editParam')"
                                    placement="top-end"
                                >
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        v-on:click="editeDialog(scope.row)"
                                    ></el-button>
                                </el-tooltip>

                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="$t('goods.delParam')"
                                    placement="top-end"
                                >
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        v-on:click="delDialog(scope.row)"
                                    ></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 添加静态属性面板 -->
                <el-tab-pane :label="$t('goods.staticAttribute')" name="only">
                    <!-- 添加静态属性按钮 -->
                    <el-button
                        type="primary"
                        size="mini"
                        v-bind:disabled="isBtnDisabled"
                        v-on:click="adddialogVisible = true"
                    >
                        {{ $t('goods.addAttribute') }}
                    </el-button>
                    <!-- 静态属性表格 -->
                    <el-table v-bind:data="onlyTableDate" border width="100%">
                        <!-- 展开行 -->
                        <el-table-column
                            type="expand"
                            :label="$t('goods.detail')"
                            width="70"
                        >
                            <template slot-scope="scope">
                                <!-- 渲染参数详情信息 -->
                                <el-tag
                                    v-for="(item, index) in scope.row.attr_vals"
                                    v-bind:key="index"
                                    closable
                                    v-on:close="handleClose(index, scope.row)"
                                >
                                    {{ item }}
                                </el-tag>
                                <!-- 要添加参数详情数据的文本框 -->
                                <el-input
                                    class="input-new-tag"
                                    v-if="scope.row.inputVisible"
                                    v-model="scope.row.inputValue"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="
                                        handleInputConfirm(scope.row)
                                    "
                                    @blur="handleInputConfirm(scope.row)"
                                >
                                </el-input>
                                <!-- 添加参数详情数据的按钮 -->
                                <el-button
                                    v-else
                                    class="button-new-tag"
                                    size="small"
                                    @click="showInput(scope.row)"
                                    >+ New Tag</el-button
                                >
                            </template>
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column
                            type="index"
                            :label="$t('goods.id')"
                            width="60"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            :label="$t('goods.attributeName')"
                            prop="attr_name"
                        ></el-table-column>
                        <el-table-column :label="$t('goods.operate')">
                            <!-- 操作 -->
                            <template slot-scope="scope">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="编辑属性"
                                    placement="top-end"
                                >
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        icon="el-icon-edit"
                                        circle
                                        v-on:click="editeDialog(scope.row)"
                                    ></el-button>
                                </el-tooltip>

                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="删除属性"
                                    placement="top-end"
                                >
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        icon="el-icon-delete"
                                        circle
                                        v-on:click="delDialog(scope.row)"
                                    ></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!-- 添加对话框 -->
        <el-dialog
            v-bind:title="'添加' + titleText"
            :visible.sync="adddialogVisible"
            width="50%"
            v-on:close="resetForm"
        >
            <el-form
                :model="addForm"
                :rules="FormRules"
                ref="form"
                label-width="100px"
            >
                <el-form-item v-bind:label="titleText" prop="attr_name">
                    <el-input
                        v-model="addForm.attr_name"
                    ></el-input></el-form-item
            ></el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm">{{
                    $t('goods.reset')
                }}</el-button>
                <el-button type="primary" @click="addParams">{{
                    $t('goods.define')
                }}</el-button>
            </span>
        </el-dialog>

        <!-- 修改对话框 -->
        <el-dialog
            v-bind:title="'修改' + titleText"
            :visible.sync="editedialogVisible"
            width="50%"
            v-on:close="resetForm"
        >
            <el-form
                :model="editeForm"
                :rules="FormRules"
                ref="form"
                label-width="100px"
            >
                <el-form-item v-bind:label="titleText" prop="attr_name">
                    <el-input
                        v-model="editeForm.attr_name"
                    ></el-input></el-form-item
            ></el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm">{{
                    $t('goods.reset')
                }}</el-button>
                <el-button type="primary" @click="editeParams">{{
                    $t('goods.define')
                }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'goodsParams',
    data() {
        return {
            // 商品分类数据
            CateList: [],
            // 指定级联选择器的配置对象
            cascaderProps: {
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
            },
            // 级联选择框选中的分类id数组
            selectKeys: [],
            // 被激活的页签名称
            activeName: 'many',
            // 动态参数的数据
            manyTableDate: [],
            // 静态属性的数据
            onlyTableDate: [],
            // 控制添加对话框是否展示
            adddialogVisible: false,
            // 控制修改对话框是否展示
            editedialogVisible: false,
            // 添加参数的表单数据对象
            addForm: {},
            // 表单的验证规则
            FormRules: {
                attr_name: [
                    {
                        required: true,
                        message: '请输入参数名称',
                        tigger: 'blur',
                    },
                ],
            },
            // 修改的表单数据对象
            editeForm: {},
        }
    },
    methods: {
        // 获取商品分类数据
        async getCateList() {
            // 请求商品分类数据接口
            const { data: res } = await this.$http.get('/categories', {
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
                params: {
                    type: 3,
                },
            })
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果请求失败
            if (status !== 200) {
                // 提示消息
                return this.$message.error(msg)
            }
            this.CateList = res.data
        },
        // 级联选择框选择项发生变化触发
        handleChange() {
            console.log(1)
            // 获取参数列表的数据
            this.getParamsData()
        },
        // tab 页签点击事件处理函数
        handleTabClick() {
            // 获取参数列表的数据
            this.getParamsData()
        },
        // 获取参数列表的数据
        async getParamsData() {
            // 如果长度不等于3，那么选择的就不是三级分类
            if (this.selectKeys.length !== 3) {
                this.selectKeys = []
                // 将动态参数和静态属性中的数据清空
                this.manyTableDate = []
                this.onlyTableDate = []
                return
            }
            // 根据所选分类的id和当前所处的面板，获取对应的参数
            const { data: res } = await this.$http.get(
                `categories/${this.cateId}/attributes`,
                {
                    headers: {
                        Authorization: localStorage.getItem('token'),
                    },
                    params: {
                        sel: this.activeName,
                    },
                }
            )
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果请求失败
            if (status !== 200) {
                // 提示消息
                return this.$message.error(msg)
            }
            // 遍历返回的数据中 attr_vals 中的数据并以空格进行分割
            res.data.forEach((item) => {
                item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
                // 控制要添加参数详情数据的文本框是否展示
                item.inputVisible = false
                // 要添加参数详情数据的文本框的内容
                item.inputValue = ''
            })
            // 判断是哪个面板
            if (this.activeName === 'many') {
                // 为动态参数赋值
                this.manyTableDate = res.data
            } else {
                // 为静态属性赋值
                this.onlyTableDate = res.data
            }
        },
        // 监听添加对话框的关闭事件,重置
        resetForm() {
            // 将所有表单值重置为初始值并移除校验效果
            this.$refs.form.resetFields()
            // 清空参数名称
            this.editeForm.attr_name = ''
            // 获取参数列表的数据
            this.getParamsData()
        },
        // 点击添加对话框的确定按钮事件
        async addParams() {
            try {
                // 验证表单规则
                await this.$refs.form.validate()
                // 请求接口
                const { data: res } = await this.$http.post(
                    `categories/${this.cateId}/attributes`,
                    {
                        attr_name: this.addForm.attr_name,
                        attr_sel: this.activeName,
                    },
                    {
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }
                )
                // 获取 msg 和 status
                const {
                    meta: { msg, status },
                } = res
                // 如果请求失败
                if (status !== 201) {
                    // 提示消息
                    return this.$message.error(msg)
                }
                // 提示消息
                this.$message.success(msg)
                // 获取参数列表的数据
                this.getParamsData()
                // 关闭添加对话框
                this.adddialogVisible = false
            } catch (err) {
                console.log(err)
            }
        },
        // 点击编辑按钮展示修改对话框
        editeDialog(arg) {
            // 修改的表单数据对象赋值
            this.editeForm = arg
            console.log(this.editeForm)
            // 展示修改对话框
            this.editedialogVisible = true
        },
        // 点击修改对话框确定按钮时触发
        async editeParams() {
            try {
                // 验证表单规则
                await this.$refs.form.validate()
                // 发送修改提交请求
                const { data: res } = await this.$http.put(
                    `categories/${this.cateId}/attributes/${this.editeForm.attr_id}`,
                    this.editeForm,
                    {
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }
                )
                // 获取 msg 和 status
                const {
                    meta: { msg, status },
                } = res
                // 如果请求失败
                if (status !== 200) {
                    // 提示消息
                    return this.$message.error(msg)
                }
                // 成功时提示消息
                this.$message.success(msg)
                // 获取参数列表的数据
                this.getParamsData()
                // 关闭修改对话框
                this.editedialogVisible = false
            } catch (err) {
                console.log(err)
            }
        },
        // 点击删除按钮时触发
        async delDialog(arg) {
            console.log(arg)
            try {
                // 弹出对话框
                const result = await this.$confirm(
                    '此操作将永久删除该用户, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                /*
                    - 如果用户点击确定，result 为 confirm
                    - 如果用户点击取消，result 为 cancel
                */
                if (result === 'confirm') {
                    // 请求删除用户接口
                    const res = await this.$http.delete(
                        `categories/${arg.cat_id}/attributes/${arg.attr_id}`,
                        {
                            headers: {
                                Authorization: localStorage.getItem('token'),
                            },
                        }
                    )
                    // 获取 msg 和 status
                    const {
                        meta: { msg, status },
                    } = res.data
                    // 如果删除成功
                    if (status === 200) {
                        this.$message({
                            type: 'success',
                            message: msg,
                        })
                        // 获取参数列表的数据
                        this.getParamsData()
                        return
                    }
                    // 删除失败时
                    this.$message({
                        type: 'error',
                        message: msg,
                    })
                }
            } catch (err) {
                console.log(err)
                if (err === 'cancel') {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                }
            }
        },
        // 要添加参数详情数据的文本框失去焦点或按下回车键都会触发
        async handleInputConfirm(row) {
            // 如果输入的内容去除空格后的长度为0，那么表示输入的不是真的内容
            // trim 方法表示去除两边空格
            if (row.inputValue.trim().length === 0) {
                // 将文本框的内容设置为空
                row.inputValue = ''
                // 隐藏要添加参数详情数据的文本框
                row.inputVisible = false
                return
            }
            // 如果输入了真的内容
            row.attr_vals.push(row.inputValue.trim())
            // 将文本框的内容设置为空
            row.inputValue = ''
            // 隐藏要添加参数详情数据的文本框
            row.inputVisible = false
            // 将数据参数保存到后台数据库中
            this.saveAttrVals(row)
        },
        // 点击添加参数详情数据的按钮展示文本框
        showInput(row) {
            // 展示要添加参数详情数据的文本框
            row.inputVisible = true
            // 让文本框自动获得焦点
            // $nextTick 方法就是当页面上元素被重新渲染之后就会执行回调函数中的代码
            this.$nextTick((_) => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },
        // 点击参数详情数据的删除按钮时触发
        handleClose(index, row) {
            // 删除对应的参数详情数据
            row.attr_vals.splice(index, 1)
            // 将数据参数保存到后台数据库中
            this.saveAttrVals(row)
        },
        // 将要添加的或者删除的参数详情数据保存到后台数据库中
        async saveAttrVals(row) {
            // 发起请求将新添加的参数详情数据保存到后台数据库中
            const { data: res } = await this.$http.put(
                `categories/${this.cateId}/attributes/${row.attr_id}`,
                {
                    attr_name: row.attr_name,
                    attr_sel: row.attr_sel,
                    attr_vals: row.attr_vals.join(' '),
                },
                {
                    headers: {
                        Authorization: localStorage.getItem('token'),
                    },
                }
            )
            // 获取 msg 和 status
            const {
                meta: { msg, status },
            } = res
            // 如果请求失败
            if (status !== 200) {
                // 提示消息
                return this.$message.error(msg)
            }
            // 成功时提示消息
            this.$message.success(msg)
        },
    },
    computed: {
        // 如果按钮需要被禁用，返回 true，反之 false
        isBtnDisabled() {
            // 如果长度不等于3，说明没有选择三级分类，那么就返回 true 禁用按钮
            if (this.selectKeys.length !== 3) {
                return true
            }
            return false
        },
        // 当前选中的三级分类的id
        cateId() {
            if (this.selectKeys.length === 3) {
                return this.selectKeys[2]
            }
            return null
        },
        // 动态标题文本
        titleText() {
            if (this.activeName === 'many') {
                return '动态参数'
            }
            return '静态属性'
        },
    },
    created() {
        // 获取父级分类的数据列表
        this.getCateList()
    },
}
</script>

<style lang="less" scoped>
.goodsClassify {
    margin: 15px 0px;
    .el-form-item {
        margin: 0;
    }
}

.el-table {
    margin-top: 15px;
    .el-tag {
        margin: 10px;
    }
    .el-tag:last-child {
        margin-right: 0px;
    }
    .input-new-tag,
    .button-new-tag {
        width: 100px;
        margin-left: 10px;
    }
}
</style>
